<template>
  <div>
    <!-- 地图容器 -->
    <div class="mapContent">
      <collegeMap />
    </div>
    <!-- 将其他内容放在地图上层 -->
    <div class="content-wrapper">
      <!-- 返回按钮 -->
      <div class="goback" @click="handleGoback"></div>
      <!-- 内容区域 -->
      <div class="content">
        <!-- 左侧 -->
        <div class="content-left">
          <!-- AI抓拍趋势 -->
          <div class="content-item">
            <div class="content-item-title">AI抓拍趋势</div>
            <div class="content-item-body">
              <leftOne />
            </div>
          </div>
          <!-- 抓拍场景分布 -->
          <div class="content-item secItem">
            <div class="content-item-title">抓拍场景分布</div>
            <div class="content-item-body">
              <progressBar v-for="item in progressData" :key="item.title" :data="item" />
            </div>
          </div>
          <!-- 抓拍处置反馈 -->
          <div class="content-item anomaly-item">
            <div class="content-item-title">抓拍处置反馈</div>
            <div class="content-item-body " >
              <dealList :data="anomalyData"/>
            </div>
          </div>
        </div>

        <!-- 右侧 -->
        <div class="content-right">
          <!-- 物联预警趋势 -->
          <div class="content-item">
            <div class="content-item-title">物联预警趋势</div>
            <div class="content-item-body">
              <rightOne />
            </div>
          </div>
          <!-- 物联场景分布 -->
          <div class="content-item">
            <!-- 左侧 -->
            <div class="content-item-title">物联场景分布</div>
            <div class="content-item-body iot-scene">
              <div class="iot-scene-box iot-legend">
                <div class="iot-legend-item">
                  <div class="iot-legend-item-name">紫外线灯使用异常</div>
                  <div class="iot-legend-item-num">55%</div>
                </div>
                <div class="iot-legend-item">
                  <div class="iot-legend-item-name">餐具消毒使用异常</div>
                  <div class="iot-legend-item-num">25%</div>
                </div>
              </div>
              <!-- 中间 -->
              <div class="iot-scene-box iot-chart">
                <rightTwo />
              </div>
              <!-- 右侧 -->
              <div class="iot-scene-box iot-legend">
                <div class="iot-legend-item">
                  <div class="iot-legend-item-name">专间温湿度异常</div>
                  <div class="iot-legend-item-num">10%</div>
                </div>
                <div class="iot-legend-item">
                  <div class="iot-legend-item-name">冰箱温湿度异常</div>
                  <div class="iot-legend-item-num">10%</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 物联处置反馈 -->
          <div class="content-item">
            <div class="content-item-title">物联处置反馈</div>

            <!-- 无处置记录时显示 -->
            <div class="content-item-body">
              <div class="no-list">暂无处置记录</div>
            </div>
          </div>
        </div>

        <!-- 中间上部 -->
        <div class="content-top">
          <!-- 中间项目列表 -->
          <div class="item" v-for="item in centerTopData" :key="item.index">
            <img class="item-img" :src="item.titleImg" alt="" />
            <div>
              <div class="item-label">{{ item.title }}</div>
              <div class="item-value">
                <AnimatedNumber :from="0" :to="item.value"></AnimatedNumber>
              </div>
            </div>
          </div>

        </div>
        <!-- 中间下部 -->
        <div class="content-bottom">
          <div class="content-header">
            <div class="content-header-title">阳光厨房直播</div>
            <div class="content-more" @click="handleToSunshineCollege">查看更多</div>
          </div>
          <!-- 视频主体 -->
          <div class="main-content">
            <!-- 视频未解除硬编码 -->
            <div class="videoContent">
              <video muted="muted" autoplay="autoplay" loop="loop" src="@/assets/video/1.mp4"></video>
            </div>
            <div class="videoContent">
              <video muted="muted" autoplay="autoplay" loop="loop" src="@/assets/video/2.mp4"></video>
            </div>
            <div class="videoContent">
              <video muted="muted" autoplay="autoplay" loop="loop" src="@/assets/video/4.mp4"></video>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, provide, ref } from "vue";
import { useRouter } from "vue-router";
import leftOne from "@/view/assetDistributeDetail/AppendCharts/leftOne/index.vue";
import rightOne from "@/view/assetDistributeDetail/AppendCharts/rightOne/index.vue";
import rightTwo from "@/view/assetDistributeDetail/AppendCharts/rightTwo/index.vue";
import collegeMap from "@/components/collegeMap/index.vue";
import progressBar from "@/components/progressBar/index.vue";
import dealList from "@/components/dealList/index.vue";
// 图片导入
import totalSum from "@/assets/home/center/totalSum.png";
import monitoring from "@/assets/home/center/monitoring.png";
import bycicle from "@/assets/home/center/bycicle.png";
import labelimg from "@/assets/home/center/label.png";
import testitem from "@/assets/testItem.jpg"

const router = useRouter();


//标签数据
const centerTopData = ref([
  {
    titleImg: totalSum,
    title: "阳光厨房接入数",
    value: "18",
    clickEvent: () => { }
  },
  {
    titleImg: monitoring,
    title: "AI接入数",
    value: "5",
    clickEvent: () => { }
  },
  {
    titleImg: bycicle,
    title: "物联接入数",
    value: "21",
    clickEvent: () => { }
  },
  {
    titleImg: labelimg,
    title: "视频探头总数",
    value: "7",
    clickEvent: () => { }
  }
])
//进度数据
const progressData = ref([
  {
    title: '未带口罩',
    num: 12,
    progress: 21
  },
  {
    title: '未带工帽',
    num: 8,
    progress: 14
  },
  {
    title: '违规玩手机',
    num: 3,
    progress: 5
  }
])
//异常数据
const anomalyData = ref([
  {
    img: testitem,
    type: "未戴口罩",
    status: "未反馈",
    name: "小菜园南京餐饮管理有限责任公司泰州万象城分公司",
    time: "2025-03-08 20:54:14"
  },
  {
    img: testitem,
    type: "未戴口罩",
    status: "未反馈",
    name: "小菜园南京餐饮管awdawd理有限责任公司泰州万象城分公司",
    time: "2025-03-08 20:54:14"
  },
  {
    img: testitem,
    type: "awda",
    status: "未反馈",
    name: "小菜园南京餐饮管理有限责任公司泰州万象城awd分公司",
    time: "2025-03-08 20:54:14"
  }, {
    img: testitem,
    type: "未戴awdawd口罩",
    status: "未反馈",
    name: "小菜园南京餐饮管理有限责任公司泰州万象城分公司",
    time: "2025-03-08 20:54:14"
  }
])



function handleGoback() {
  router.push({ name: "startPage" });
}
function handleToSunshineCollege() {
  router.push({ name: "sunshineCollegePage" });
}
</script>

<style scoped>
/* 修改地图容器样式为全屏 */
.mapContent {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  /* 保持地图在最底层 */
}

/* 确保地图组件填满容器 */
.mapContent :deep(#mapContainer) {
  width: 100% !important;
  height: 100% !important;
}

/* 添加内容包装器，确保内容显示在地图上层 */
.content-wrapper {
  position: relative;
  z-index: 1;
  /* 内容在地图之上，header 之下 */
  pointer-events: none;
}

/* 确保可交互元素能够点击 */
.content-wrapper .goback,
.content-wrapper .content,
.content-wrapper .content * {
  pointer-events: auto;
}

.goback {
  width: 7.395833vw;
  height: 1.510417vw;
  background: url("../../assets/gobackBtn.png") 50% no-repeat;
  background-size: 100% 100%;
  margin-left: 2.5vw;
  margin-bottom: 2vw;
  cursor: pointer;
}

.content .content-item {
  background: rgba(0, 0, 0, 0.7);
  flex-basis: 33.3%;
  position: relative;
  box-sizing: border-box;
  /* 确保内边距和边框被包含在元素的总宽度和高度中 */
  overflow: hidden;
}

.content-left,
.content-right {
  width: 24.6875vw;
  height: calc(100vh - 19vh);
  display: flex;
  flex-direction: column;
  /* 垂直排列子元素 */
  justify-content: space-between;
  /* 子元素在垂直方向上均匀分布 */
  align-items: stretch;
  /* 子元素宽度占满父容器 */
  gap: 0.8vw;
  /* 设置项目之间的间隔 */
  top: 2vw;
  position: relative;
  /* 确保top属性生效 */
  box-sizing: border-box;
  /* 确保内边距和边框被包含在元素的总宽度和高度中 */
}

.content-left {
  position: absolute;
  left: 2.5vw;
}

.content-right {
  position: absolute;
  right: 1.7vw;
}

.content-item .content-item-title {
  width: 100%;
  height: 1.8vw;
  line-height: 1.25vw;
  padding-left: 0.520833vw;
  font-size: 1.25vw;
  font-family: homeTime;
  color: #fff;
  text-align: left;
  text-shadow: 0 0 0.364583vw rgba(58, 178, 231, 0.67);
  letter-spacing: 0.104167vw;
  background-size: 100% 100%;
  background: url("../../assets/home/titlebase.png") 0 0 no-repeat;
  background-position: left bottom;
}

.content-top {
  position: absolute;
  width: calc(100% - 54.58333vw);
  /* height: 15vh; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  left: 27.291667vw;
  top: 2vw;
}

.item {
  flex: 1 1 23%;
  /* 控制弹性项目占据的空间, 23% 留出一些间距空间 */
  max-width: 23%;
  /* 确保每个项目的最大宽度，帮助达到每行4个项目 */
  box-sizing: border-box;
  /* 确保内边距和边框被包含在元素的总宽度和高度中 */
  color: #fff;
  display: flex;
  align-items: center;
  text-align: center;
  height: 2.3vw;
}

.item .item-img {
  width: 3vw;
  height: 2.5vw;
}

.item .item-label {
  font-size: 0.8vw;
  line-height: 1.1vw;
  color: #fff;
  text-align: left;
  letter-spacing: 0.2vw;
  margin-bottom: 0.104167vw;
}

.item .item-value {
  font-size: 1.6vw;
  letter-spacing: 0.1vw;
  font-family: homeTime;
}

.content-bottom {
  width: calc(100% - 54.58333vw);
  position: fixed;
  left: 27.7vw;
  bottom: 1vw;
  background: url("../../assets/longBody.png");
  box-sizing: border-box;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: left top;
  padding: 1vw;
  z-index: 1;
  /* 添加z-index确保在地图上方 */
  pointer-events: auto;
  /* 确保可以点击 */
}

.content-bottom .content-header-title {
  width: 10.416667vw;
  height: 2vw;
  line-height: 1.25vw;
  padding-left: 0.520833vw;
  font-size: 1.25vw;
  font-family: homeTime;
  color: #fff;
  text-align: left;
  text-shadow: 0 0 0.364583vw rgba(58, 178, 231, 0.67);
  letter-spacing: 0.104167vw;
  background-size: 100% 100%;
  background: url("../../assets/home/titlebase.png") 0 0 no-repeat;
  background-position: right;
  background-position-y: 0;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 1vw;
  padding-bottom: 0.2vw;
}

.content-bottom .content-more {
  padding-right: 1.145833vw;
  margin-right: 1.041667vw;
  font-size: 0.729167vw;
  color: #54e5fc;
  background-size: 1.041667vw 0.9375vw;
  cursor: pointer;
  background: url("../../assets//home/rightArrow.png") 100% no-repeat;
}

.main-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.videoContent {
  width: 32%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0.3vw;
  background: rgba(0, 0, 0, 0.2);
}

.videoContent video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content .content-item-body {
  width: 100%;
  padding: 0.2vw;
  box-sizing: border-box;
  height: 90%;
}

.secItem {
  padding-top: 0.3vw;
  padding-left: 1vw;
  padding-right: 1vw;
}

.content-item-body.iot-scene {
  display: flex;
  justify-content: space-between;
}

.content-item-body.iot-scene .iot-legend {
  width: 50%;
}

.content-item-body.iot-scene .iot-chart {
  width: 100%;
}

.iot-scene-box.iot-legend {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-around;
}

.iot-scene-box .iot-legend .iot-legend-item {
  width: 100%;
}

.iot-legend-item .iot-legend-item-name {
  line-height: 1.5625vw;
  font-size: 0.729167vw;
  color: #fff;
  white-space: nowrap;
}

.iot-legend-item .iot-legend-item-num {
  line-height: 2.083333vw;
  font-size: 1.458333vw;
  color: #1df2ff;
  text-align: center;
  font-family: YouSheBiaoTiHei;
}

.anomaly-item {
  height: 33.3%;
  
}

.anomaly-item .content-item-body {
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.anomaly-item .content-item-body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.no-list {
  line-height: 1.25vw;
  font-size: 0.625vw;
  color: #eef8ff;
  text-align: center;
  margin-top: 1.2vw;
}
</style>
